<template>
	<!-- 退款完成界面 -->
	<view class="refundFinish">
		
		<!-- 顶部 -->
		<view class="rf-title">
			<uni-steps :options="list2" active-color="#de5c8a" :active="active" />
		</view>
		
		
		<view class="od-line3">
			<view class="content-line1">
				<!-- 54 -->
				<image src="/static/imgs/order-icon1.png" mode="" class="order-icon"></image>
				<text class="line1-text2 font30">瑞派宠物店</text>
		
				<image src="/static/youjiantou.png" mode="" class="youjiantou"></image>
				<text class="order-status">已收货</text>
				
			</view>
		
			<view class="content-line2" @click="navTo('../detail/order-detail')">
				<view class="line1-text1">
					<image src="/static/imgs/orderImage.png" mode=""></image>
				</view>
				<view class="line1-text2 font28">
					<view class="content-title">
						皇家猫粮室内专用10kg，满50送储粮桶...
					</view>
					<view class="price">
						<text class="font30">
							￥99999.99
						</text>
						</br>
						<text class="font24">
							×1
						</text>
					</view>
					<view class="order-number">
						订单号:12345678910
					</view>
				</view>
		
			</view>
			<view class="content-line3">
				<view class="line3-l font24" v-if="false">
					<text>提货日期:</text>
					<text class="font30">10.18</text>
				</view>
				<view class="line3-r">
					<text class="font24 ">
						共1件商品
					</text>
					<text class="font24 padding13">
						合计：
					</text>
					<text class="font30 money">
						￥99999.99
					</text>
				</view>
			</view>
			<view class="content-line4" v-if="false">
				<text class="button3" @click="navTo('../user/pickUpCode')">提货码</text>
				<text class="button5">评价</text>
				<text class="button5">退货退款</text>
			</view>
		</view>
		
		<!-- 退款信息 -->
		<view class="rf-info">
			<view class="info-item">
				<text>退款总金额</text>
				<text>￥9.9</text>
			</view>
			<view class="info-item">
				<text>钱款去向</text>
				<text>账户余额</text>
			</view>
			<view class="info-item">
				<text>申请时间</text>
				<text>2019-10-29 10:30</text>
			</view>
		</view>
		
		<view class="rf-footer">
			您的退款已经完成，请查收您的账户余额！
		</view>
		
		<button type="primary" @click="change">改变状态</button>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	export default {
		components: {
			uniSteps
		},
		
		
		data() {
			return {
				active: 0,
				list2: [{
					title: '申请售后',
					desc: '选择售后服务：仅退款/退货',
					
				}, {
					title: '申请成功',
					desc: '申请退货成功钱款即将返退',
					
				}, {
					title: '退款到账',
					desc: ' 钱款可到余额/银行卡查询',
					
				}]
			};
		},
		methods:{
			change() {
				if (this.active < this.list2.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			}
		},
	}
</script>

<style lang="scss">
@import 'static/css/user-order.scss';
@import 'static/css/smallCommon.scss';
</style>
